<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/bootstrap-theme.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/carousel.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery.dataTables_themeroller.css" />">
<link rel="stylesheet" href="<c:url value="/resources/css/jquery-ui-1.9.2.custom.css" />">

<script type="text/javascript" src="<c:url value="/resources/js/jquery-2.1.1.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/bootstrap.js"/>"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery.dataTables.js" />"></script>
<script type="text/javascript" src="<c:url value="/resources/js/jquery-ui-1.9.2.custom.js" />"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$(".editInformation").click(function(e){
			e.preventDefault();
			$("#modalEditInformation").modal();
		});

		$(".changePassword").click(function(e){
			e.preventDefault();
			$("#modalChangePassword").modal();
		});

		$("#tabletransactionSource").dataTable();

		$("#tabletransactionTarget").dataTable();

		$("#tableResult").dataTable();
		
	});
</script>
<script type="text/javascript">
	$(function(){
		$("#dateFromPicker").datepicker();
		$("#toDatePicker").datepicker();
	});
</script>

<script type="text/javascript">
	function checkInbox(){
		$.ajax({
			url: '<c:url value="/checkInbox/ajax" />',
			type: 'get',
			success: function(i){
				$("#inbox").html(i);
			}
		});
	}
</script>
<script type="text/javascript">
	var intervalId = 0;
	imtervalId = setInterval(checkInbox,5000);
</script>
<title>Home Page</title>
</head>
<body>
	<div class="container">

      <!-- Static navbar -->
      <div class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="<c:url value="/" />">DAO JPA</a>
          </div>
          <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="<c:url value="/" />">Home</a></li>
              <security:authorize access="hasRole('ROLE_ADMIN')">
              <li><a href="<c:url value="/adminpage"/>">Admin Page</a></li>
              </security:authorize>
              <security:authorize access="isAuthenticated()">
              <li class="active"><a href="<c:url value="/profile"/>">Profile</a></li>
              <li><a href="<c:url value="/account"/>">Accounts</a></li>
              <li><a href="<c:url value="/card"/>">Cards</a></li>
              <li><a href="<c:url value="/transfer"/>">Transfer</a></li>
              </security:authorize>
              <security:authorize access=" !isAuthenticated()">
              <li><a href="<c:url value="/login"/>">Login</a></li>
              </security:authorize>
              <li><a href="<c:url value="/register"/>">Register</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
            	<security:authorize access=" isAuthenticated()">
            	<li><a>Welcome ${pageContext.request.userPrincipal.name}</a></li>
            	<li><a href="<c:url value="/checkInbox"/>">Inbox <span class="badge"><div id="inbox">0</div></span></a></li>
            	<li><a href="<c:url value="/logout"/>">Logout</a></li>
            	</security:authorize>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </div>
    </div> <!-- /container -->
    
     <div class="container">
     	<h2 class="text-center">My Profile</h2>
     	<c:if test="${not empty message}">
    	<div class="alert alert-success">${message}</div>
    	</c:if>
    	<table class="table table-striped table-bordered table-hover" id="tableProfile">
			<thead>
				<tr>
					<th>Login Id</th>
					<th>Password</th>
					<th>First Name</th>
					<th>Last Name</th>
					<th>Address</th>
					<th>Phone</th>
					<th>Edit Information</th>
					<th>Change Password</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>${customer.loginId}</td>
					<td>${customer.password.substring(1,5)}</td>
					<td>${customer.firstname}</td>
					<td>${customer.lastname}</td>
					<td>${customer.address}</td>
					<td>${customer.phone}</td>
					<td><a class="btn btn-danger editInformation">Edit</a></td>
					<td><a class="btn btn-danger changePassword">Change</a></td>
				</tr>
			</tbody>
		</table>
		
		<h2 class="text-center">My Transaction</h2>
		<h2>You transfer to another account</h2>
    	<table class="table table-striped table-bordered table-hover" id="tabletransactionSource">
			<thead>
				<tr>
					<th>Account Number Target</th>
					<th>Owner Account Target</th>
					<th>Bank Target</th>
					<th>Branch Target</th>
					<th>Amount</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${transactionSource}" var="transaction">
				<tr>
					<td>${transaction.accountNumberTarget}</td>
					<td>${transaction.loginIdTarget}</td>
					<td>${transaction.targetBank}</td>
					<td>${transaction.targetBranch}</td>
					<td>${transaction.amount}</td>
					<td>${transaction.date.toString().substring(0,10)}</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		
		<h2>You receive from another account</h2>
    	<table class="table table-striped table-bordered table-hover" id="tabletransactionTarget">
			<thead>
				<tr>
					<th>Account Number Source</th>
					<th>Owner Account Source</th>
					<th>Bank Source</th>
					<th>Branch Source</th>
					<th>Amount</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${transactionTarget}" var="transaction">
				<tr>
					<td>${transaction.accountNumberSource}</td>
					<td>${transaction.loginIdSource}</td>
					<td>${transaction.targetBank}</td>
					<td>${transaction.targetBranch}</td>
					<td>${transaction.amount}</td>
					<td>${transaction.date.toString().substring(0,10)}</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		
		<h2>Search Transaction By Date Range</h2>
		<form action="<c:url value="/profile/search" />" method="post" class="form-horizontal" role="form">
		  <div class="form-group">
		    <label for="accountType" class="col-sm-4 control-label">From Date</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control" id="dateFromPicker" name="fromDate" value="${fromDate}" >
		    </div>
		  </div>
		   <div class="form-group">
		    <label for="accountType" class="col-sm-4 control-label">To Date</label>
		    <div class="col-sm-4">
		      <input type="text" class="form-control" id="toDatePicker" name="toDate" value="${toDate}">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-4 col-sm-8">
		      <button type="submit" class="btn btn-default btn-primary">Search</button>
		    </div>
		  </div>
		 </form>
		 
		 <table class="table table-striped table-bordered table-hover" id="tableResult">
			<thead>
				<tr>
					<th>Account Number Source</th>
					<th>Account Number Target</th>
					<th>Owner Account Source</th>
					<th>Owner Account Target</th>
					<th>Bank</th>
					<th>Branch</th>
					<th>Amount</th>
					<th>Date</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${result}" var="transaction">
				<tr>
					<td>${transaction.accountNumberSource}</td>
					<td>${transaction.accountNumberTarget}</td>
					<td>${transaction.loginIdSource}</td>
					<td>${transaction.loginIdTarget}</td>
					<td>${transaction.targetBank}</td>
					<td>${transaction.targetBranch}</td>
					<td>${transaction.amount}</td>
					<td>${transaction.date.toString().substring(0,10)}</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
		 
		<!-- Modal -->
		<form:form action="${pageContext.request.contextPath}/profile/editInformation" modelAttribute="customer" method="post" cssClass="form-horizontal" role="form" >
			<div class="modal fade" id="modalEditInformation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel">Change Information</h4>
			      </div>
			      <div class="modal-body">
			          
					  <form:hidden cssClass="form-control" path="loginId" value="${customer.loginId}" />
					  
					  <form:hidden cssClass="form-control" path="password" value="${customer.password}" />
					   
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-4 control-label">First Name</label>
					    <div class="col-sm-6">
					      <form:input cssClass="form-control" path="firstname" value="${customer.firstname}" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-4 control-label">Last Name</label>
					    <div class="col-sm-6">
					      <form:input cssClass="form-control" path="lastname" value="${customer.lastname}" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputEmail3" class="col-sm-4 control-label">Address</label>
					    <div class="col-sm-6">
					      <form:input cssClass="form-control" path="address" value="${customer.address}" />
					    </div>
					  </div>
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-4 control-label">Phone</label>
					    <div class="col-sm-6">
					      <form:input class="form-control" path="phone" value="${customer.phone}" />
					    </div>
					  </div>
					
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <input type="submit" class="btn btn-primary" value="Save changes">
			      </div>
			    </div>
			  </div>
			</div>
		</form:form>
		<!-- Modal -->
		 <form:form action="${pageContext.request.contextPath}/profile/changePassword" modelAttribute="customer" method="post" cssClass="form-horizontal" role="form" >
			<div class="modal fade" id="modalChangePassword" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
			        <h4 class="modal-title" id="myModalLabel">Insert New Password</h4>
			      </div>
			      <div class="modal-body">
			       
					  <form:hidden cssClass="form-control" path="loginId" value="${customer.loginId}" />
					  
					  <div class="form-group">
					    <label for="inputPassword3" class="col-sm-4 control-label">Insert New Password</label>
					    <div class="col-sm-6">
					      <form:password cssClass="form-control" path="password" placeholder="New Password" />
					    </div>
					  </div>
					  
				      <form:hidden cssClass="form-control" path="firstname" value="${customer.firstname}" />
				    
				      <form:hidden cssClass="form-control" path="lastname" value="${customer.lastname}" />
				   
				      <form:hidden cssClass="form-control" path="address" value="${customer.address}" />
				   
				      <form:hidden class="form-control" path="phone" value="${customer.phone}" />
					    
					
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			        <input type="submit" class="btn btn-primary" value="Save changes">
			      </div>
			    </div>
			  </div>
			</div>
    	</form:form>
     </div>
	 <div class="container"  style="padding-top: 50px;">
    	<div class="navbar navbar-default navbar-fixed-bottom">
    		<div class="container">
    			<p class="navbar-text">&copy; Hai Nguyen|Minh Nhut | Java Fresher</p>
    			<a href="#" class="navbar-btn btn btn-danger pull-right"><span class="glyphicon glyphicon-chevron-up"></span>Back To Top</a>
    		</div>
    	</div>
    </div>    
</body>
</html>